<template>
	<view :style="skin" class="content message">
		<view class="mtLine">
		</view>
		<scroll-view scroll-y :style="{height: contentHeight}">
		<view class="messageList flex-c-SB" v-for="(item,index) in messInfoList" :key="index" @click="handleView(item)">
			<view  class="circle typeColor1">
				<text  class="iconfont icon-a-riFill-notification-2-fillMZAUiRy"></text>
			<!-- 	<text v-else-if="item.type == 2" class="iconfont icon-a-riFill-checkbox-circle-fillHpobbKd"></text>
				<text  v-else-if="item.type == 3" class="iconfont icon-a-riFill-refund-fill5a41eor"></text> -->
			</view>
			<view class="word">
				<view class="headBox flex-c-SB">
					<view class="title">
						{{item.codeDesc}}-{{item.typeDesc}}
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
				<view class="msgInfo">
					{{item.msgContent}}
				</view>
			</view>
			<view class="unRead" v-if="item.isRead == 0"></view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
		import {  updRead } from '@/api/leaMsg.js'
	export default {
		data() {
			return {
				messInfoList:[

				],
				contentHeight:'0px'
			};
		},
		onLoad() {
			this.messInfoList = uni.getStorageSync('messInfo')
		},
		created() {
			let titleHeight = uni.getSystemInfoSync().statusBarHeight - 20 + 'px'
			this.contentHeight = `calc(100% - ${titleHeight})`
			console.log(this.contentHeight);
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin,
			})
		
		},
		methods:{
			handleView(item){
				updRead({
					id:item.id
				}).then(res=>{
					if(res.code == 0)[
						this.messInfoList.map(ele =>{
							if(ele.id == item.id){
								return ele.isRead = 1
							}
						})
					]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mtLine{
		height: 8px;
		background-color: #f8f8f8;
	}
	.messageList{
		height: 72px;
		border-bottom: 0.5px solid #eee;
		font-size: 14px;
		padding:  12px 16px;
		background-color: #fff;
		box-sizing: border-box;
		position: relative;
		.unRead{
			position: absolute;
			top: 0px;
			right: 8px;
			width: 8px;
			height: 8px;
			color: #fff;
			border-radius: 50%;
			background-color: #F53F3F;
			text-align: center;
			line-height: 16px;
		}
		.circle{
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background-color: red;
			text-align: center;
			line-height: 48px;
			text{
				color: #fff;
			}
		}
		.typeColor1{
			background-color: #F53F3F;
		}
		.typeColor2{
			background-color: #00B42A;
		}
		.typeColor3{
			background-color: #F7BA1E;
		}
		.word{
			width: calc(100% - 60px);
			margin-left: 12px;
			.headBox{
				margin-bottom: 4px;
				line-height: 22px;
				.title{
					font-size: 16px;
					color: #1D2129;
					font-family: 600;
					
				}
				.date{
					font-size: 12px;
					color: #A9AEB8;
				}
			}
			.msgInfo{
				font-size: 14px;
				color: #86909C;
				line-height: 20px;
			}
		}
	}
</style>
